<template>
	<!-- 学习课程 -->
	<view class="content">
		<!-- 图文课程 -->
		<view class="tuwenBox" v-if="type=='图文'">
			<view class="info">
				<mp-html :content="content.content" />
			</view>
			<!-- <text class="title">{{content.name}}</text> -->
		</view>
		<!-- 视频课程 -->
		<view class="videoBox" v-else-if="type=='视频'">
			<video :poster="content.cover" class="video" :src="content.content" controls
				@loadedmetadata="onLoadedMetadata"></video>
		</view>
		<!-- 音频课程 -->
		<view class="voiceBox" v-else-if="type=='音频'">
			<video :poster="content.cover" class="audio" :src="content.content" controls></video>
			<!-- <text class="title">{{content.name}}</text> -->
		</view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				type: '', //课程类型 决定显示哪个
				title: '',
				content: '',
				course_id: '', //课程id
				id: '', //目录id
				duration: '' //课程时长
			}
		},
		onShow() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.course_id = currentPage.options.course_id;
			this.id = currentPage.options.id;
			const encodedString = currentPage.options.type;
			let decodedString = decodeURIComponent(encodedString);
			while (decodedString !== decodeURIComponent(decodedString)) {
				decodedString = decodeURIComponent(decodedString);
			}
			this.type = decodedString;
			this.$request.get(`course/course/catalogue?course_id=${this.course_id}&id=${this.id}`).then(res => {
				console.log(res.data);
				this.content = res.data.data;
				uni.setNavigationBarTitle({
					title: this.content.name
				});

			})
		},
		methods: {
			onLoadedMetadata(e) {
				// 获取视频时长（单位：秒）
				this.duration = this.formatDurationWithChinese(e.detail.duration.toFixed(2));
			},
			formatDurationWithChinese(seconds) {
				// 确保秒数是整数
				seconds = Math.floor(seconds);
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				const secs = seconds % 60;
				// 构建格式化后的字符串
				let formattedDuration = '';
				if (hours > 0) {
					formattedDuration += `${hours}时`;
				}
				if (minutes > 0 || hours > 0) { // 如果有小时或者有分钟，显示分钟
					formattedDuration += `${minutes}分`;
				}
				formattedDuration += `${secs}秒`;
				return formattedDuration;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentsBox{
		width: 100%;
		// margin-left: 40rpx;
		.contentsItem{
			width: 100%;
			height: 150rpx;
			border-bottom: 1rpx dotted #8e8e8e;
			margin-bottom: 50rpx;
		}
	}
	.mentorBox {
		position: relative;
		width: 100%;

		.mentorItem {
			position: relative;
			width: 100%;
			height: 110rpx;
			margin-bottom: 50rpx;

			.mentorAvatar {
				position: absolute;
				left: 0;
				top: 0;
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

			.mentorName {
				position: absolute;
				font-size: 28rpx;
				top: 20rpx;
				left: 165rpx;
			}

			.mentorDescrible {
				position: absolute;
				color: #8e8e8e;
				font-size: 24rpx;
				top: 80rpx;
				left: 165rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #dcdcdc;
		margin-bottom: 50rpx;
		margin-top: 50rpx;
		display: inline-block;
	}

	.titleBox {
		display: flex;
		align-items: center;

		.titleLabel {
			font-size: 34rpx;
			margin-left: 30rpx;
			font-weight: 700;
		}

		.dot {
			width: 10rpx;
			height: 10rpx;
			background-color: #f08229;
			border-radius: 50%;
		}
	}

	.chapterIntroduction,
	.contents,
	.mentorResume {
		width: 670rpx;
		margin-top: 100rpx;
		margin-left: 40rpx;

		.introduction {
			margin-top: 50rpx;
			font-weight: 26rpx;
			text-align: justify;
			display: block;
		}
	}

	.describeImg {
		width: 670rpx;
		height: 182rpx;
		margin-left: 40rpx;
		margin-top: 50rpx;
	}

	.typeBox {
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.courseTime {
			margin-left: 25rpx;
			font-size: 28rpx;
		}

		.typeBoxInner {
			width: 70rpx;
			height: 40rpx;
			background-color: #f08229;
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.video,
	.audio {
		width: 100%;
		margin-left: 0%;
		// margin-top: 50rpx;
	}

	.info {
		width: 90%;
		margin-left: 5%;
		margin-top: 50rpx;
	}

	.title {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 65rpx;
		margin-bottom: 45rpx;
		font-size: 52rpx;
		display: block;
		font-weight: bold;
	}

	.tuwenBox,
	.videoBox,
	.voiceBox {
		width: 100%;
		height: 100vh;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #fff;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>